import { defineStore } from 'pinia';
import { ThemeInfoState } from './interface';
import { colorGradient } from '../libs/utils';

export const useThemeStore = defineStore('themeInfo', {
	state: (): ThemeInfoState => ({
		websiteTitle: '后台管理系统',
		isCacheConfig: true,
		showLeftMenu: false,
		isCollapse: false,
		isOpenSelectBgColor: false,
		popupMenuOpened: false,
		//
		isFixedLogo: false,
		isShowBreadcrumb: true,
		isShowBreadcrumbIcon: true,
		isUniqueOpened: true,
		isCollapseTransition: true,
		isShowTagsViewIcon: false,
		themeColor: '#409EFF',
		menuBgColor: '#2F4256',//菜单背景色
		menuInlineBgColor: '#1F2D3D',//菜单内联背景色
		menuHighlightBgColor: '#409EFF',//菜单高亮背景色
		menuHighlightColor: '#ffffff',//菜单高亮字体色
		dxLayerHeaderBgColor: '#1F2D3D',
		dxLayerHeaderColor: '#ededed',
		dxLayerHeaderHoverColor: '#409EFF',
		cacheKeys: [
			'isShowBreadcrumbIcon',
			'isShowBreadcrumb',
			'isOpenSelectBgColor',
			'isFixedLogo',
			'isUniqueOpened',
			'isCollapseTransition',
			'isShowTagsViewIcon',
			'themeColor',
			'menuBgColor',
			'menuInlineBgColor',
			'menuHighlightBgColor',
			'menuHighlightColor',
			'dxLayerHeaderBgColor',
			'dxLayerHeaderColor',
			'dxLayerHeaderHoverColor'
		],
	}),
	actions: {
		// 初始化主题配置
		initConfig() {
			if (!this.isCacheConfig) return;
			let that: any = this;
			let themeConfig = uni.getStorageSync('dx-theme-config');
			if (themeConfig) {
				for (let [key, value] of Object.entries(themeConfig)) {
					that[key] = value;
					this.setDomStyle(key, value);
				}
			}
		},
		setIsCollapse() {
			this.isCollapse = !this.isCollapse;
		},
		// 左侧菜单
		setShowLeftMenu() {
			this.showLeftMenu = true;
		},
		// 设置主题颜色缓存
		setCacheConfig(name: string) {
			if (!this.isCacheConfig) return;
			let that: any = this;
			let themeConfig = uni.getStorageSync('dx-theme-config') || {};
			themeConfig[name] = that[name];
			this.setDomStyle(name, that[name]);
			uni.setStorageSync('dx-theme-config', themeConfig);
		},
		/**
		 * 设置css变量值
		 * @param key
		 * @param value
		 */
		setDomStyle(key: string, value: any) {
			let variable;
			switch (key) {
				case 'themeColor':
					variable = '--el-color-primary';
					const colors: any = colorGradient(value);
					colors.map((color: string, index: number) => {
						document.documentElement.style.setProperty(`--el-color-primary-light-${index}`, color);
					});
					document.documentElement.style.setProperty('--el-color-primary-dark-2',colors[2])
					break;
				case 'menuBgColor':
					variable = '--dx-menu-bg-color';
					break;
				case 'menuInlineBgColor':
					variable = '--dx-menu-inline-bg-color';
					break;
				case 'menuHighlightBgColor':
					variable = '--dx-menu-highlight-bg-color';
					break;
				case 'menuHighlightColor':
					variable = '--dx-menu-active-color';
					break;
				case 'dxLayerHeaderBgColor':
					variable = '--dx-layer-header-bg-color';
					break;
				case 'dxLayerHeaderColor':
					variable = '--dx-layer-header-color';
					break;
			}
			//
			if (variable) {
				document.documentElement.style.setProperty(variable, value);
			}
		},
	},
});
